<template>
  <div class="wrap">
    <div class="box_top">
      <div class="title">
        <div class="T_l">移动工作平台</div>
      </div>
      <div class="box_sub">
        <div class="first_sub">
          <span>No.</span>
          <span>1</span>
        </div>
        <div class="box_sub1">
          总分：
          <span>90</span>
        </div>
      </div>
    </div>
    <div style="width: 360px; height: 360px; margin-top: 200px">
      <div id="leiDaTu" class="echart" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script>
import iPhoneXBottomSetAside from "../../mixins/iphoneXBottomAside.js";
// 接口
import {} from "@/core/api/index";
import GLOBAL from "@/components/global_variable";
export default {
  data() {
    return {
      current: 0,
    };
  },
  created() {
    // minxing接口的方法
    document.addEventListener("deviceready", onDeviceReady, false); // 等待cordova加载
    let that = this;
    function onDeviceReady() {
      MXCommon.getCurrentUser(function (result) {
        console.log(result, "当前登录账号信息");
        GLOBAL.userId = result.login_name;
        GLOBAL.userName = result.name;
        // setTimeout(() => {

        // }, 10);
      });
    }
    this.$nextTick(function () {
      this.initRadar("radar_canvas");
    });
  },
  mixins: [iPhoneXBottomSetAside],
  methods: {
    initRadar() {
      var arr1 = [70, 90, 60, 60, 45];
      var i = -1;
      let charts = this.$echarts.init(document.getElementById("leiDaTu"));
      var option = {
        tooltip: {
          show: false, //取消鼠标悬浮事件
        },
        legend: {},
        radar: {
          shape: "circle",
          axisLine: {
            // (圆内的几条直线)坐标轴轴线相关设置
            lineStyle: {
              color: "#888",
              // 坐标轴线线的颜色。
              width: 0,
              // 坐标轴线线宽。
              type: "solid",
              // 坐标轴线线的类型。
            },
          },
          radius: "62%",
          // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
          splitLine: {
            lineStyle: {
              color: "#eee", // 设置网格的颜色
            },
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ["#EECFEF", "#F8E9F8", "#F4DFF4", "#F8E9F8", "#FBF3FB"], // 图表背景网格的颜色
            },
          },
          name: {
            rich: {
              a: {
                color: "#535770",
                lineHeight: 20,
              },
              b: {
                color: "#4C5574",
                align: "center",
                fontSize: "20",
                fontWeight: "bold",
              },
              c: {
                backgroundColor: {
                  image: require("../../assets/img1/评分扣分项查看入口@2x.png"),
                  lineHeight: 20,
                },
              },
            },
            formatter: (a, b, c) => {
              i++;
              return `{b|${arr1[i]}}
{a|${a}}{c|}`;
            },
          },
          indicator: [
            { name: "系统利用率", max: 100 },
            { name: "系统运维", max: 100 },
            { name: "业务连续性", max: 100 },
            { name: "用户体验", max: 100 },
            { name: "应用安全", max: 100 },
          ],
          triggerEvent: true, //添加触发点击事件
        }, 
        series: [
          {
            type: "radar",
            symbol: "none",
            lineStyle: {
              color: "rgba(5, 165, 156, .1)",
            },
            areaStyle: {
              color: "rgba(5, 193, 174, 1)", // 选择区域颜色
            },
            data: [
              {
                value: arr1,
              },
            ],
          },
        ],
      };
      charts.setOption(option);
      charts.on("click", function (params) {
        if (params.name.indexOf("系统利用率") != -1) {
          alert("系统利用率");
        } else if (params.name.indexOf("系统运维") != -1) {
          alert("系统运维");
        } else if (params.name.indexOf("业务连续性") != -1) {
          alert("业务连续性");
        } else if (params.name.indexOf("用户体验") != -1) {
          alert("用户体验");
        } else if (params.name.indexOf("应用安全") != -1) {
          alert("应用安全");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
  background: url("../../assets/img1/B3团队信息@2x.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  padding-top: 40px;
}
.box_top {
  width: 100%;
  height: 96%;
  background: #ffffff;
  border-radius: 70px 20px 0 0;
  position: absolute;
  bottom: 0;
  padding: 75px 30px 0px 30px;
  .title {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 20px;
    .T_l {
      height: 70px;
      width: 260px;
      background: url("../../assets/img1/系统标题背景@2x.png") no-repeat;
      background-size: 100% 100%;
      font-family: SourceHanSansCN-Medium;
      font-size: 36px;
      color: #313754;
      letter-spacing: 0;
      text-align: center;
      line-height: 110px;
    }
  }
  .box_sub {
    display: flex;
    margin-left: 10px;
    .first_sub {
      > span:first-child {
        opacity: 0.32;
        font-family: Impact;
        font-size: 30px;
        color: #5d2ed7;
      }
      > span:last-child {
        font-family: Impact;
        font-size: 66px;
        color: #5d2ed7;
      }
    }
    .box_sub1 {
      background: #f8f5fe;
      border-radius: 47px;
      border-radius: 47px;
      font-family: SourceHanSansCN-Normal;
      font-size: 28px;
      padding: 0px 30px;
      height: 74px;
      line-height: 74px;
      display: flex;
      margin-left: 16px;
      margin-top: 5px;
      > span {
        font-size: 58px;
        font-weight: bold;
      }
    }
  }
}
</style>